<!-- 交易订单查询 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="充值账号">
                            <a-input v-model="mobile" allow-clear placeholder="请输入充值账号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="商户号">
                            <a-input v-model="merchantNo" allow-clear placeholder="请输入商户号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="apiId">
                            <a-input v-model="apiId" allow-clear placeholder="请输入apiId" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="产品ID">
                            <a-input v-model="productId" allow-clear placeholder="请输入产品Id" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="产品名称">
                            <a-input v-model="productName" allow-clear placeholder="请输入产品名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="订单号">
                            <a-input v-model="orderCode" allow-clear placeholder="请输入订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="支付订单号">
                            <a-input v-model="payOrderCode" allow-clear placeholder="请输入支付订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="订单类型">
                            <a-select v-model="orderType" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in orderTypeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24" v-if="userType == '0'">
                        <a-form-item label="状态">
                            <a-select v-model="status" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="订单时间">
                            <a-range-picker @change="onDateChange" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="渠道">
                            <a-select v-model="selChannelId" placeholder="请选择" allowClear @change="getData">
                                <a-select-option v-for="(item,i) in channelsList" :key="i" :value="item.id">{{item.channelName}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button type="primary" style="margin-right: 20px" @click="getData()">查询</a-button>
                            <a-button type="" icon="upload" @click="downloadData()">导出数据</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size, showTotal: (total) => `交易笔数：${total}条`, pageSizeOptions: ['10','20','50','100','500']}" size="small" :scroll="{ x: 1500, }">
            <div slot="orderType" slot-scope="orderType">
                <div v-for="(item,i) in orderTypeList" :key="item.id">
                    <a-tag v-if="item.id == orderType" :color="colors[i%13]">{{item.name}}</a-tag>
                </div>
            </div>
            <div slot="status" slot-scope="status">
                <div v-for="item in statusList" :key="item.id">
                    <span :class="`status${status}`" v-if="item.id == status">{{item.name}}</span>
                </div>
            </div>
            <div slot="productName" slot-scope="productName,record">
                <div v-if="productName">
                    <div style="font-size: 12px;color: #666">名称：{{productName}}</div>
                    <div>ID：{{record.productId}}</div>
                </div>
                <div v-else>-</div>
            </div>
            <div slot="channelId" slot-scope="channelId">
                <div v-for="(item,i) in channelsList" :key="item.id">
                    <a-tag v-if="item.id == channelId" :color="colors[i%13]">{{item.channelName}}</a-tag>
                </div>
            </div>
            <div slot="operation" slot-scope="text,record">
                <div class="editable-row-operations">
                    <a-popconfirm
                        title="是否修改当前异常订单状态为已处理?"
                        v-if="userType == '0' && ((record.status == 0 ))"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="setStatus(record,1)"
                    >
                        <a-button type="link">已处理</a-button>
                    </a-popconfirm>
                    <a-popconfirm
                        title="是否修改当前异常订单状态为已处理?"
                        v-if="userType == '0' && ((record.status == 1 ))"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="setStatus(record,0)"
                    >
                        <a-button type="link" style="color: red">未处理</a-button>
                    </a-popconfirm>
                    <a-popconfirm
                        title="是否删除当前异常订单记录?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="del(record)"
                    >
                        <a-button type="link" style="color: red">删除</a-button>
                    </a-popconfirm>
                </div>
            </div>
        </a-table>

    </div>
</template>

<script>
import { columns } from './table';
import { queryExternalReleaseOrderFormAbnormal , updateExternalReleaseOrderFormAbnormal } from '@/api/order';
import { queryExternalChannelInfo } from '@/api/product';
import { timeDiff } from '@/utils/util';
import area from '@/assets/area';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            brandList: [],
            dataList: [],
            total: 0,
            isload: false,
            page: 1,
            size: 10,
            merchantOrderCode: '', // 商户订单号
            userId: sessionStorage.getItem('userId'),
            orderCode: '', // 系统订单号
            merchantNo: '', // 商户号
            realName: '' , // 姓名
            mobile: '', // 手机号
            idCardNo: '', // 身份证号
            minFacePrice: '', // 最小充值面额
            maxFacePrice: '', // 最大充值面额
            orderType: undefined, // 订单类型
            orderTypeList: this.global.brandId == 12 ? [
                { id: 2, name: '话费充值'},
            ] :[
                { id: 2, name: '话费充值'},
                { id: 3, name: '电费充值'},
                { id: 4, name: '抖币充值'},
            ],
            isH5: undefined,
            isH5List: [
                { id: 0, name: '后台充值'},
                { id: 1, name: '外放h5充值'},
            ],
            orderStatus: undefined,
            orderStatusList: [
                { id: 0, name: '待执行' },
                { id: 1, name: '已成功' },
                { id: 2, name: '已失败' },
                { id: 3, name: '处理中' },
                { id: 4, name: '退款中' },
                { id: 5, name: '退款成功' },
                { id: 6, name: '待付款' },
                { id: 7, name: '已取消' },
                { id: 8, name: '部分成功' },
            ],
            handleStatus: undefined, // 单方处理状态
            handleStatusList: [
                { id: 0, name: '初始化' },
                { id: 1, name: '处理中' },
                { id: 2, name: '处理成功' },
                { id: 3, name: '处理失败' },
                { id: 4, name: '部分成功' },
                { id: 5, name: '待提交' },
                { id: 6, name: '已取消' },
            ],
            status: undefined,
            statusList: [
                { id: 0, name: '未处理' },
                { id: 1, name: '已处理' },
            ],
            columns: sessionStorage.getItem('userType') == '0' ? columns[0] : columns[1],
            colors: ['blue','purple','cyan','green','orange','red','pink','brown','indigo','lime','purple','teal','yellow','amber'],
            startTime: '', // 开始时间
            endTime: '', // 结束时间
            userType: sessionStorage.getItem('userType'),
            channelList: [],
            channelId: undefined,
            selChannelId: undefined,
            channelsList: [],
            edition: undefined,
            editionList: this.global.editionList,
            operator: undefined,
            operatorList: this.global.operatorList,
            failList:['号码不正确','缴费小于欠费','该地区维护','欠费超最大限额'],
            invoice: undefined, // 发票类型
            invoiceList: [
                {id: '0', name: '通用'},
                {id: '1', name: '专票'},
                {id: '2', name: '普票'},
                {id: '3', name: '无票'},
            ],
            failureReason: undefined,
            order: {}, // 订单数据
            visible: false,
            confirmLoading: false,
            current: 1,
            downloadVisible: false,
            pageSize: 10000,
            partialVisible: false,
            arrivalAmount: '', // 部分到账金额
            sumPrice: 0, // 累计消费金额
            sumFacePrice: 0, // 累计充值面额
            sumCostPrice: 0, // 累计成本金额
            cancelFormFailureReason: '', // 撤单原因
            cancelFormVisible: false,
            channel: null, // 补单、提单渠道
            startUpdateTime: '', // 开始更新时间
            endUpdateTime: '', // 结束更新时间
            provinceList: [], // 省份列表
            province: undefined,
            cityList: [], // 城市列表
            city: undefined,
            provinces: undefined,
            supplementChannleVisible: false,
            productId: undefined,
            productList: [],
            productName: '',
            productId: '',
            apiId: '',
            payOrderCode: '',
        };
    },
    async created(){
        if(sessionStorage.getItem('userType') == '0'){
            await this.queryChannel()
        }
        this.getData()
    },
    methods: {
        timeDiff,
        // 查询交易订单
        getData(){
            let _this = this
            _this.isload = true
            console.log(_this.selChannelId,'_this.selChannelId')
            const params = {
                'brandId':_this.brandId,
                // 'userId':_this.userId,
                'orderCode':_this.orderCode,
                'merchantNo':_this.merchantNo,
                'orderType':_this.orderType,
                'startTime': _this.startTime,
                'endTime': _this.endTime,
                'account': _this.mobile,
                'channelId': _this.selChannelId,
                'size':_this.size,
                'page':_this.page - 1,
                'status': _this.status,
                'productId': _this.productId,
                'productName': _this.productName,
                'apiId': _this.apiId,
                'payOrderCode': _this.payOrderCode,
            }
            queryExternalReleaseOrderFormAbnormal(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    if(res.data.content.length > 0){
                        _this.dataList = res.data.content
                        _this.total = res.data.totalElements
                    }else if(res.data.totalElements > 0){
                        _this.page = 1
                        _this.getData();
                    }else{
                        _this.dataList = []
                        _this.total = res.data.totalElements
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        dateChange(date,dateString){
            this.gtCreateTime = dateString[0];
            this.ltCreateTime = dateString[1];
            this.getData();
        },
        // 日期筛选
        onDateChange(date,dateStr){
            console.log(date,dateStr)
            if(date.length > 0){
                this.startTime = `${dateStr[0]} 00:00:00`
                this.endTime = `${dateStr[1]} 23:59:59`
            }else{
                this.startTime = ''
                this.endTime = ''
            }
            this.getData()
        },
        // 查询渠道信息
        queryChannel(){
            let _this = this
            _this.channel = null;
            return new Promise((resolve,reject) => {
                queryExternalChannelInfo({'size': 99,'page': 0, 'brandId': _this.global.brandId})
                .then(res=>{
                    if(res.success){
                        _this.channelsList = [...res.data.content,{'channelName': '路由', 'id': 0}]
                        resolve()
                    }else{
                        reject(res.errMessage)
                    }
                })
            })
        },
        // 强制修改订单三方状态为失败
        setStatus(item,status){
            let _this = this;
            const params = {
                'id': item.id,
                'status': status,
            }
            updateExternalReleaseOrderFormAbnormal(params)
            .then(res => {
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '操作成功',
                        duration: 8,
                    })
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        del(item){
            let _this = this;
            const params = {
                'id': item.id,
                'status': item.status,
                'isDelete': 1,
            }
            updateExternalReleaseOrderFormAbnormal(params)
            .then(res => {
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '操作成功',
                        duration: 8,
                    })
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        }
    }
}

</script>
<style scoped>
.status0{
    color: #faad14
}
.status1{
    color: #52c41a
}
.status2{
    color: #f5222d
}
.status3{
    color: #faad14
}
.status4{
    color: #faad14
}
.status5{
    color: #52c41a
}
.status6{
    color: #faad14
}
.status7{
    color: #f5222d
}
.status8{
    color: #52c41a
}
.handleStatus0,.handleStatus1{
    color: #faad14
}
.handleStatus2{
    color: #52c41a
}
.handleStatus3{
    color: #f5222d
}
.handleStatus4{
    color: #52c41a
}

.flex{
    display: flex;
    align-items: center;
}
</style>